<template>
  <!-- 添加或修改协议配置对话框 -->
  <el-drawer
    :wrapperClosable="false"
    :title="title"
    :visible.sync="open"
    direction="rtl"
  >
    <el-container>
      <el-main>
        <el-form ref="form" :model="form" label-width="80px">

          <el-form-item
            v-for="(item, index) in properties"
            :key="index"
            :label="item.name"
            :prop="item.property"
          >
            <el-input
              v-model="form[item.property]"
              :type="item.type.type"
              auto-complete="new-password"
            />
          </el-form-item>

        </el-form>

      </el-main>
      <el-footer>
        <div class="bottom-bar" style="text-align: right">
          <el-button @click="cancel">关 闭</el-button>
          <el-popover
            v-if="submitType === 'save&deploy'"
            popper-class="popper"
            style="margin-left: 10px;"
            placement="top"
            width="100px"
            v-model="popoverVisible"
            trigger="hover"
          >
            <div style="text-align: left;">
              <div>
                <el-button size="small" @click="submitForm">仅保存</el-button>
              </div>
              <div style="margin-top: 10px">
                <el-button size="small" @click="submitDeployForm">保存并生效</el-button>
              </div>
            </div>
            <el-button icon="el-icon-arrow-down" type="primary" slot="reference">保 存</el-button>
          </el-popover>
          <el-button v-if="submitType === 'save'" type="primary" @click="submitForm">保 存</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script>

export default {
  name: 'ConfigurationAddEdit',
  props: {
    submitType: {
      type: String,
      default: 'save&deploy'
    }
  },
  data() {
    return {
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      //配置信息列表
      properties: [],
      // 防止抽屉关闭时Popover 弹出框还未关闭
      popoverVisible: false
    }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {}
      this.resetForm('form')
    },
    /** 编辑按钮操作*/
    handleUpdate(properties, configuration) {
      this.reset()
      this.open = true
      this.title = '编辑配置'

      this.properties = properties || []
      // 给表单赋值
      this.assignForm(configuration)
    },
    /** 提交按钮 */
    submitForm(publishState) {
      this.$emit('submit', this.form, () => {
        this.$modal.msgSuccess('保存成功')
        this.popoverVisible = false;
        this.open = false
      }, publishState)
    },

    /** 给表单赋值*/
    assignForm(configuration) {

      configuration = JSON.parse(JSON.stringify(configuration))

      if (!configuration) {
        return
      }
      let temp = {}

      this.properties.forEach(item => {
        temp[item.property] = configuration[item.property]
      })

      this.form = temp

    },

    /** 提交并部署 */
    submitDeployForm() {
      this.submitForm(1)
    },
  }
}
</script>

<style lang="scss">

.popper {
  min-width: 100px;
}

</style>
